JSON(JavaScript Object Notation)
✒️ 2025-05-23 14:50 내용 수정
참고 자료 : TCPSchool JSON 개요, TCPSchool JSON 문법, TCPSchool JSON 구조
서로 다른 프로그램에서 데이터를 쉽게 교환하고 저장하기 위한 데이터 교환 표준
- JavaScript(JavaScript)를 확장하였으며, JavaScript의 객체 표기법을 따른다.
- 프로그래밍 언어와 운영체제에 독립적이다.
문법 및 구조
- JavaScript의 리터럴과 property 표기법을 사용한다.
- 서로 다른 시스템간의 호환성을 위해 주석을 되도록 사용하지 않는다.
- 데이터의 나열은 쉼표 ","를 사용하여 나열한다.
"데이터이름" : "값"
- 객체 : 중괄호 "{}" 로 둘러쌓아 표현하며, 이름과 값으로 구성된 property의 정렬되지 않은 집합이다.
{"데이터이름" : "값"}
- 배열 : 대괄호 "[]" 로 둘러쌓아 표현하며, 다차원 배열을 생성할 수 있다.
"배열이름" : [
{"이름1" : "값1", "이름2" : "값2"},
{"이름3" : "값3", "이름4" : "값4"}
]
데이터 타입
| 타입 | 설명 |
|---|---|
| 숫자(number) | 정수, 실수, 지수(e표기 가능) 8진수, 16진수 표현 방법 제공 x |
| 문자열(string) | 문자, 문자열 |
| 논리형(boolean) | true, false |
| 객체(object) | {} |
| 배열(array) | [] |
| null | null. 항상 소문자로 표기 |
메서드
| 메서드 | 설명 |
|---|---|
JSON.stringify() |
Javascript Object -> JSON |
JSON.parse() |
JSON -> Javascript Object |
const obj = {x:1, y:2}
const jsonString = JSON.stringify(obj);
const obj2 = JSON.parse(jsonString);
console.log(typeof obj, obj); // Javascript Object
console.log(typeof jsonString, jsonString); // JSON
console.log(typeof obj2, obj2); // Javascript Object
object { x: 1, y: 2 }
string {"x":1,"y":2}
object { x: 1, y: 2 }
예제
- JSP에서 JSON을 작성할 때 ""와 ''구분을 엄격하게 하지 않았다. 다만 다른 프로그램의 호환을 위해 ""로 표시하는 것이 좋다.
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
table{text-align:center;}
</style>
<script>
var apple = { 'name' : "사과", 'color' : "red"};
document.write("이름 : " + apple.name + ", 색상 : " + apple.color);
document.write("<hr>");
</script>
</head>
<body>
<table border="1">
<tr>
<th>이름</th>
<th>색상</th>
</tr>
<tr>
<td id="name1"></td>
<td id="color1"></td>
</tr>
<tr>
<td id="name2"></td>
<td id="color2"></td>
</tr>
<tr>
<td id="name3"></td>
<td id="color3"></td>
</tr>
<tr>
<td id="name4"></td>
<td id="color4"></td>
</tr>
</table>
<hr>
<table border="1">
<tr>
<th>이름</th>
<th>장르</th>
<th>가격</th>
</tr>
<tr>
<td id="gn1"></td>
<td id="gr1"></td>
<td id="pr1"></td>
</tr>
<tr>
<td id="gn2"></td>
<td id="gr2"></td>
<td id="pr2"></td>
</tr>
<tr>
<td id="gn3"></td>
<td id="gr3"></td>
<td id="pr3"></td>
</tr>
</table>
<script>
var fruit = [
{ 'name' : "바나나", 'color' : 'yellow'},
{ 'name' : "오렌지", 'color' : 'orange'},
{ 'name' : "포도", 'color' : 'purple'},
{ 'name' : "수박", 'color' : 'green and black'}];
document.getElementById("name1").innerHTML = fruit[0].name;
document.getElementById("color1").innerHTML = fruit[0].color;
document.getElementById("name2").innerHTML = fruit[1].name;
document.getElementById("color2").innerHTML = fruit[1].color;
document.getElementById("name3").innerHTML = fruit[2].name;
document.getElementById("color3").innerHTML = fruit[2].color;
document.getElementById("name4").innerHTML = fruit[3].name;
document.getElementById("color4").innerHTML = fruit[3].color;
document.write("<hr>");
var game = { 'platform' : 'pc',
'game1' : {'name' : 'borderlands2', 'genre' : 'loot shooter', 'price' : '21600원'},
'game2' : [{'name' : 'hades', 'genre' : 'action roguelike', 'price' : '27000원'},
{'name' : 'riskofrain2', 'genre' : 'action roguelike', 'price' : '26000원'}]};
document.getElementById("gn1").innerHTML = game.game1.name;
document.getElementById("gr1").innerHTML = game.game1.genre;
document.getElementById("pr1").innerHTML = game.game1.price;
document.getElementById("gn2").innerHTML = game.game2[0].name;
document.getElementById("gr2").innerHTML = game.game2[0].genre;
document.getElementById("pr2").innerHTML = game.game2[0].price;
document.getElementById("gn3").innerHTML = game.game2[1].name;
document.getElementById("gr3").innerHTML = game.game2[1].genre;
document.getElementById("pr3").innerHTML = game.game2[1].price;
</script>
</body>
</html>
